<template>
  <div class="pagination-wrap">
    <div class="pagination">
      <button
        type="button"
        :disabled="myCurrentPage === 1"
        @click="setMyCurrentPage(-1)"
      >
        <i class="iconfont icon-jiantou_xiangzuoliangci"></i>
      </button>
      <ul>
        <li
          :class="{
            active: myCurrentPage === 1,
          }"
          @click="toPage(1)"
        >
          <a class="page-link">1</a>
        </li>
        <li v-show="startEnd.start > 2">
          <a class="page-link iconfont icon-elipsis"></a>
        </li>
        <li
          v-for="(number, index) in startEnd.end - startEnd.start + 1"
          :key="startEnd.start + index"
          :class="{
            active: myCurrentPage === startEnd.start + index,
          }"
          @click="toPage(startEnd.start + index)"
        >
          <a class="page-link"> {{ startEnd.start + index }}</a>
        </li>

        <!-- <li><a class="page-link">6</a></li> -->
        <li v-show="startEnd.end < totalPages - 1">
          <a class="page-link iconfont icon-elipsis"></a>
        </li>

        <li
          v-if="totalPages > 1"
          :class="{
            active: myCurrentPage === totalPages,
          }"
          @click="toPage(totalPages)"
        >
          <a class="page-link"> {{ totalPages }} </a>
        </li>
      </ul>
      <button
        type="button"
        :disabled="myCurrentPage >= totalPages"
        @click="setMyCurrentPage(1)"
      >
        <i class="iconfont icon-jiantou_xiangyouliangci"></i>
      </button>
      <span class="total">共 {{ total }} 条</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagenation",
  components: {},
  data() {
    return {
      myCurrentPage: this.currentPage,
    };
  },
  props: {
    total: Number, // 总条数
    pageSize: {
      // 每页的条数
      type: Number,
      default: 5,
    },
    // 当前是第几页
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  mounted() {
    // console.log(this.pageSize, this.totalPage);
  },
  computed: {
    totalPages() {
      // 总页数
      return Math.ceil(this.total / this.pageSize);
    },

    startEnd() {
      const { myCurrentPage, totalPages } = this;
      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1 < 1 ? 1 : totalPages - 1,
        };
      }

      let start = myCurrentPage - 2;
      if (start < 2) start = 2;
      // let end = currentPage + 2;
      let end = start + 4;
      if (end > totalPages - 1) {
        end = totalPages - 1;
        start = end - 4;
      }

      return {
        start,
        end,
      };
    },
  },
  methods: {
    setMyCurrentPage(number) {
      this.myCurrentPage += number;
      // this.$emit("current-change", this.myCurrentPage);
    },
    toPage(currentPage) {
      this.myCurrentPage = currentPage;
      // this.$emit("current-change", currentPage);
    },
  },
  watch: {
    myCurrentPage(newVal) {
      this.$emit("current-change", newVal);
    },
    total() {
      this.myCurrentPage = 1;
    },
  },
};
</script>
<style lang='less' scoped>
.pagination {
  display: flex;
}
.active {
  color: #fff;
  background: center center #4a54ff;
  background-image: linear-gradient(315deg, #6772ff 0, #00f9e5 100%);
  background-size: 104% 104%;
  border-radius: 50%;
}
ul {
  display: flex;
  font-weight: bold;
  li {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    &:hover {
      background-color: #ccc;
    }
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      &:hover {
        color: #fff !important;
        text-decoration: none;
      }
    }
  }
}
.total {
  line-height: 30px;
}
button:disabled {
  cursor: not-allowed;
  color: #bbb;
}
</style>

